<template>
  <div class="parent_container">
    <div class="login_form_class">
      <h1 class="login_form_ui">登录界面</h1>
      <el-form
        :model="ruleForm"
        label-width="auto"
        style="max-width: 600px"
        :rules="rules"
        ref="ruleFormRef"
      >
        <el-form-item prop="name">
          <el-input
            class="login_form_input"
            placeholder="请输入账号"
            v-model="ruleForm.name"
            prefix-icon="Avatar"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            class="login_form_input"
            placeholder="请输入密码"
            v-model="ruleForm.password"
            prefix-icon="Lock"
            show-password
          />
        </el-form-item>
        <el-button
          style="width: 100%; height: 50px; margin-bottom: 30px"
          size="large"
          type="primary"
          @click="submitForm(ruleFormRef)"
          >登 录</el-button
        >
      </el-form>
      <div class="login_form_down">
        <div>免费注册</div>
        |
        <div>忘记账号名</div>
        |
        <div>忘记密码</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { setToken } from "@/utils/auth";
const router = useRouter();
// do not use same name with ref
const ruleForm = reactive({
  name: "",
  password: "",
});
const ruleFormRef = ref(null);
const rules = reactive({
  name: [{ required: true, message: "账号名不得为空！", trigger: "blur" }],
  password: [{ required: true, message: "密码不得为空！", trigger: "blur" }],
});
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!", router);
      setToken("test");
      router.push("/");
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style scoped>
.parent_container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 使用视口高度作为高度 */
  background-color: #dcdcdc; /* 用于区分父元素的背景色 */
}

.login_form_class {
  width: 580px;
  height: 380px; /* 固定高度 */
  margin-top: -200px;
  display: flex;
  flex-direction: column;
  align-items: center; /* 垂直居中 */
  border: #f8f8ff solid 1px;
  border-radius: 20px;
  background-color: #f8f8ff;
}
.login_form_ui {
  font-weight: bold;
}
.login_form_input {
  width: 380px;
  height: 50px;
}
.login_form_down {
  width: 380px;
  height: 50px;
  margin-top: -20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 14px;
  color: rgb(80, 77, 75);
}
</style>
